// ThemeSwitcher/index.tsx - 主题切换器组件
// 这个组件提供一个下拉选择框，允许用户切换应用的主题（亮色、暗色或自动）

// 导入React：必须导入React才能使用JSX语法和React功能
import React from 'react';
// 导入Ant Design的Select组件：提供美观的下拉选择框
import { Select } from 'antd';
// 导入设置状态存储：使用Zustand store获取和设置主题
import { useSettingsStore } from '@/store';
// 导入useTranslation Hook：从react-i18next获取国际化功能，用于翻译选项标签
import { useTranslation } from 'react-i18next';

// 定义ThemeSwitcher组件：使用React.FC（函数组件）类型
// 这是一个无状态函数组件，负责渲染主题选择下拉框
const ThemeSwitcher: React.FC = () => {
  // 使用Zustand store获取当前主题和设置主题的方法
  // useSettingsStore是一个自定义Hook，返回主题状态和设置函数
  // 这里使用解构赋值获取theme值和setTheme函数
  const { theme, setTheme } = useSettingsStore();
  
  // 使用useTranslation Hook获取翻译函数
  // useTranslation是react-i18next提供的Hook，用于访问国际化功能
  // 这里通过解构赋值获取t函数，用于翻译选项标签
  const { t } = useTranslation();

  // 处理主题切换事件：当用户选择不同主题时调用
  // value参数：用户选择的主题值（'light'、'dark'或'auto'）
  const handleThemeChange = (value: 'light' | 'dark' | 'auto') => {
    // 调用setTheme方法更新主题状态
    // 这会改变Zustand store中的主题值，并触发所有使用该状态的组件重新渲染
    setTheme(value);
  };

  // 返回组件的JSX结构
  // 在React中，组件必须返回一个React元素（JSX）
  return (
    // 使用Ant Design的Select组件
    // value：设置当前选中的值，使用当前主题theme（受控组件模式）
    // style：设置下拉框的宽度为120像素
    // onChange：设置选择变化时的回调函数，即handleThemeChange
    // options：配置下拉框的选项数组，每个选项包含value和翻译后的label
    <Select
      value={theme}
      style={{ width: 120 }}
      onChange={handleThemeChange}
      options={[
        { value: 'light', label: t('theme.light') }, // 亮色主题选项，使用翻译函数
        { value: 'dark', label: t('theme.dark') },   // 暗色主题选项，使用翻译函数
        { value: 'auto', label: t('theme.auto') },   // 自动主题选项，使用翻译函数
      ]}
    />
  );
};

// 导出ThemeSwitcher组件作为默认导出
// 这样其他文件可以通过import ThemeSwitcher from '@/components/ThemeSwitcher'来导入
export default ThemeSwitcher;